{% extends 'base.html' %}
{% load static %}
{% block title %}产品中心{% endblock %}
<!--图片-->
{% block navImg %}
    <img style="width: 100%" src="{% static 'images/products.jpg' %}" alt="产品中心"/>
{% endblock %}

<!--主体内容-->
{% block content %}
    <div id="product">
        <div class="row">
            <div class="col-md-3 mode-menu">
                <div class="mode-menu-title">产品中心</div>
                <div class="mode-item"><a href="{% url 'product' 1 %}">家用机器人</a></div>
                <div class="mode-item"><a href="{% url 'product' 2 %}">智能监控</a></div>
                <div class="mode-item"><a href="{% url 'product' 3 %}">人脸识别解决方案</a></div>
            </div>
            <div class="col-md-9">
                <div class="mode-title">{{ title }}</div>
                {% for item in data %}
                    <div class="row product-item">
                        <div class="col-md-5">
                            <img class="img-responsive img-thumbnail" src="{{ item.productImgs.first.photo.url }}" alt="产品中心">
                        </div>
                        <div class="col-md-7">
                            <div class="product-title">{{ item.title }}</div>
                            <div class="padding2">{{ item.desc }}</div>
                            <div class="product-btn">
                                <a class="btn btn-primary" href="{% url 'product_detail' item.id %}">查看详情</a>
                            </div>
                        </div>
                    </div>
                {% endfor %}

                <!--分页-->
                {% if data.paginator.num_pages > 1 %}
                    <div class="page">
                        <ul class="pagination">
                            {% for item in data.paginator.page_range %}
                                {% if data.number == item%}
                                    <li class="active"><a href="#">{{ item }}</a></li>
                                {% else %}
                                    <li><a href="?num={{ item }}">{{ item }}</a></li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                    </div>
                {% endif %}

            </div>
        </div>
    </div>
{% endblock %}